<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>layui后台管理模板</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta http-equiv="Access-Control-Allow-Origin" content="*">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="format-detection" content="telephone=no">
	<link rel="icon" href="../../favicon.ico">
	<link rel="stylesheet" href="../../dist/css/layui.css" media="all" />
	<link rel="stylesheet" href="//at.alicdn.com/t/font_tnyc012u2rlwstt9.css" media="all" />
	<link rel="stylesheet" href="../../css/main.css" media="all" />
	<style>
		/*修改密码*/
		.changePwd{ width:80%; margin:2% 0 0 3%; }
	</style>
</head>
<body class="main_body">
	<div class="layui-layout layui-layout-admin"  id="wxchat" v-cloak>
		<!-- 顶部 -->
		<div class="layui-header header">
			<div class="layui-main">
				<a href="#" class="logo">微信公众号</a>
				<!-- 显示/隐藏菜单 -->
				<a href="javascript:;" class="iconfont hideMenu icon-menu1"></a>
			    <!-- 天气信息 -->
			    <div class="weather" pc>
			    	<div id="tp-weather-widget"></div>
					<script>(function(T,h,i,n,k,P,a,g,e){g=function(){P=h.createElement(i);a=h.getElementsByTagName(i)[0];P.src=k;P.charset="utf-8";P.async=1;a.parentNode.insertBefore(P,a)};T["ThinkPageWeatherWidgetObject"]=n;T[n]||(T[n]=function(){(T[n].q=T[n].q||[]).push(arguments)});T[n].l=+new Date();if(T.attachEvent){T.attachEvent("onload",g)}else{T.addEventListener("load",g,false)}}(window,document,"script","tpwidget","//widget.seniverse.com/widget/chameleon.js"))</script>
					<script>tpwidget("init", {
					    "flavor": "slim",
					    "location": "WX4FBXXFKE4F",
					    "geolocation": "enabled",
					    "language": "zh-chs",
					    "unit": "c",
					    "theme": "chameleon",
					    "container": "tp-weather-widget",
					    "bubble": "disabled",
					    "alarmType": "badge",
					    "color": "#FFFFFF",
					    "uid": "U9EC08A15F",
					    "hash": "039da28f5581f4bcb5c799fb4cdfb673"
					});
					tpwidget("show");</script>
			    </div>
			    <!-- 顶部右侧菜单 -->
			    <ul class="layui-nav top_menu">
			    	<li class="layui-nav-item showNotice" id="showNotice" pc>
						<a href="javascript:;"><i class="iconfont icon-gonggao"></i><cite>系统公告</cite></a>
					</li>
			    	<li class="layui-nav-item" mobile>
			    		<a href="javascript:;" class="mobileAddTab" data-url="page/user/changePwd.html"><i class="iconfont icon-shezhi1" data-icon="icon-shezhi1"></i><cite>设置</cite></a>
			    	</li>
			    	<li class="layui-nav-item" mobile>
			    		<a href="/admin/logout" class="signOut"><i class="iconfont icon-loginout"></i> 退出</a>
			    	</li>
					<li class="layui-nav-item" pc>
						<a href="javascript:;">
							<img src="../../images/face.jpg" class="layui-circle" width="35" height="35">
							<cite>{{user.nickname}}</cite>
						</a>
						<dl class="layui-nav-child">
							<dd><a href="javascript:;" data-url="page/user/userInfo.html"><i class="iconfont icon-zhanghu" data-icon="icon-zhanghu"></i><cite>个人资料</cite></a></dd>
							<dd><a href="javascript:;" @click="updatePassword"><i class="iconfont icon-shezhi1" data-icon="icon-shezhi1"></i><cite>修改密码</cite></a></dd>
							<dd><a href="/admin/logout" class="signOut"><i class="iconfont icon-loginout"></i><cite>退出</cite></a></dd>
						</dl>
					</li>
				</ul>
			</div>
		</div>
		<!-- 左侧导航 -->
		<div class="layui-side layui-bg-black">
			<div class="navBar layui-side-scroll"></div>
		</div>
		<!-- 右侧内容 -->
		<div class="layui-body layui-form">
			<div class="layui-tab marg0" lay-filter="bodyTab" id="top_tabs_box">
				<ul class="layui-tab-title top_tab" id="top_tabs">
					<li class="layui-this" lay-id=""><i class="iconfont icon-computer"></i> <cite>后台首页</cite></li>
				</ul>
				<ul class="layui-nav closeBox">
				  <li class="layui-nav-item">
				    <a href="javascript:;"><i class="iconfont icon-caozuo"></i> 页面操作</a>
				    <dl class="layui-nav-child">
					  <dd><a href="javascript:;" class="refresh refreshThis"><i class="layui-icon">&#x1002;</i> 刷新当前</a></dd>
				      <dd><a href="javascript:;" class="closePageOther"><i class="iconfont icon-prohibit"></i> 关闭其他</a></dd>
				      <dd><a href="javascript:;" class="closePageAll"><i class="iconfont icon-guanbi"></i> 关闭全部</a></dd>
				    </dl>
				  </li>
				</ul>
				<div class="layui-tab-content clildFrame">
					<div class="layui-tab-item layui-show">
						<iframe src="/main"></iframe>
					</div>
				</div>
			</div>
		</div>
		<!-- 修改密码 -->
		<div id="passwordLayer" style="display: none;">
		<form class="layui-form changePwd">
			<div class="layui-form-item">
				<label class="layui-form-label">用户名</label>
				<div class="layui-input-block">
					<input type="text"  v-model="user.username" disabled autocomplete="off" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">旧密码</label>
				<div class="layui-input-block">
					<input type="password" placeholder="请输入旧密码" required lay-verify="required" v-model="password" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">新密码</label>
				<div class="layui-input-block">
					<input type="text" placeholder="请输入新密码" required lay-verify="required" v-model="newPassword" class="layui-input">
				</div>
			</div>
		</form>
		</div>

		<!-- 底部 -->
		<div class="layui-footer footer">
			<p>copyright @2017 weirdor v1.0.1</p>
		</div>
	</div>
	
	<!-- 移动导航 -->
	<div class="site-tree-mobile layui-hide"><i class="layui-icon">&#xe602;</i></div>
	<div class="site-mobile-shade"></div>
	<script type="text/javascript" src="../../dist/layui.js"></script>
	<script src="../../libs/jquery.min.js"></script>
	<script src="../../libs/vue.min.js"></script>
	<script type="text/javascript" src="../../js/leftNav.js"></script>
	<script type="text/javascript" src="../../js/index.js"></script>
	<script>
        layui.use('layim', function(layim){

            //演示自动回复
            var autoReplay = [
                '您好，我现在有事不在，一会再和您联系。',
                '你没发错吧？face[微笑] ',
                '洗澡中，请勿打扰，偷窥请购票，个体四十，团体八折，订票电话：一般人我不告诉他！face[哈哈] ',
                '你好，我是主人的美女秘书，有什么事就跟我说吧，等他回来我会转告他的。face[心] face[心] face[心] ',
                'face[威武] face[威武] face[威武] face[威武] ',
                '<（@￣︶￣@）>',
                '你要和我说话？你真的要和我说话？你确定自己想说吗？你一定非说不可吗？那你说吧，这是自动回复。',
                'face[黑线]  你慢慢说，别急……',
                '(*^__^*) face[嘻嘻] ，是贤心吗？'
            ];

            //基础配置
            layim.config({

                //初始化接口
                init: {
                    url: '../../../json/getList.json'
                    ,data: {}
                }

                //或采用以下方式初始化接口
                /*
                ,init: {
                  mine: {
                    "username": "LayIM体验者" //我的昵称
                    ,"id": "100000123" //我的ID
                    ,"status": "online" //在线状态 online：在线、hide：隐身
                    ,"remark": "在深邃的编码世界，做一枚轻盈的纸飞机" //我的签名
                    ,"avatar": "a.jpg" //我的头像
                  }
                  ,friend: []
                  ,group: []
                }
                */


                //查看群员接口
                ,members: {
                    url: '../../../json/getMembers.json'
                    ,data: {}
                }

                //上传图片接口
                ,uploadImage: {
                    url: '/upload/image' //（返回的数据格式见下文）
                    ,type: '' //默认post
                }

                //上传文件接口
                ,uploadFile: {
                    url: '/upload/file' //（返回的数据格式见下文）
                    ,type: '' //默认post
                }

                ,isAudio: true //开启聊天工具栏音频
                ,isVideo: true //开启聊天工具栏视频

                //扩展工具栏
                ,tool: [{
                    alias: 'code'
                    ,title: '代码'
                    ,icon: '&#xe64e;'
                }]

                //,brief: true //是否简约模式（若开启则不显示主面板）

                ,title: 'Weirdor' //自定义主面板最小化时的标题
                //,right: '100px' //主面板相对浏览器右侧距离
                //,minRight: '90px' //聊天面板最小化时相对浏览器右侧距离
                ,initSkin: '3.jpg' //1-5 设置初始背景
                //,skin: ['aaa.jpg'] //新增皮肤
                //,isfriend: false //是否开启好友
                //,isgroup: false //是否开启群组
                //,min: true //是否始终最小化主面板，默认false
                ,notice: true //是否开启桌面消息提醒，默认false
                //,voice: true //声音提醒，默认开启，声音文件为：default.mp3

                ,msgbox: layui.cache.dir + 'css/modules/layim/html/msgbox.html' //消息盒子页面地址，若不开启，剔除该项即可
                ,find: layui.cache.dir + 'css/modules/layim/html/find.html' //发现页面地址，若不开启，剔除该项即可
                ,chatLog: layui.cache.dir + 'css/modules/layim/html/chatlog.html' //聊天记录页面地址，若不开启，剔除该项即可

            });

            /*
            layim.chat({
              name: '在线客服-小苍'
              ,type: 'kefu'
              ,avatar: 'http://tva3.sinaimg.cn/crop.0.0.180.180.180/7f5f6861jw1e8qgp5bmzyj2050050aa8.jpg'
              ,id: -1
            });
            layim.chat({
              name: '在线客服-心心'
              ,type: 'kefu'
              ,avatar: 'http://tva1.sinaimg.cn/crop.219.144.555.555.180/0068iARejw8esk724mra6j30rs0rstap.jpg'
              ,id: -2
            });
            layim.setChatMin();*/

            //监听在线状态的切换事件
            layim.on('online', function(data){
                //console.log(data);
            });

            //监听签名修改
            layim.on('sign', function(value){
                //console.log(value);
            });

            //监听自定义工具栏点击，以添加代码为例
            layim.on('tool(code)', function(insert){
                layer.prompt({
                    title: '插入代码'
                    ,formType: 2
                    ,shade: 0
                }, function(text, index){
                    layer.close(index);
                    insert('[pre class=layui-code]' + text + '[/pre]'); //将内容插入到编辑器
                });
            });

            //监听layim建立就绪
            layim.on('ready', function(res){

                //console.log(res.mine);

                layim.msgbox(5); //模拟消息盒子有新消息，实际使用时，一般是动态获得

                //添加好友（如果检测到该socket）
                layim.addList({
                    type: 'group'
                    ,avatar: "http://tva3.sinaimg.cn/crop.64.106.361.361.50/7181dbb3jw8evfbtem8edj20ci0dpq3a.jpg"
                    ,groupname: 'Angular开发'
                    ,id: "12333333"
                    ,members: 0
                });
                layim.addList({
                    type: 'friend'
                    ,avatar: "http://tp2.sinaimg.cn/2386568184/180/40050524279/0"
                    ,username: '冲田杏梨'
                    ,groupid: 2
                    ,id: "1233333312121212"
                    ,remark: "本人冲田杏梨将结束AV女优的工作"
                });

//                setTimeout(function(){
//                    //接受消息（如果检测到该socket）
//                    layim.getMessage({
//                        username: "Hi"
//                        ,avatar: "http://qzapp.qlogo.cn/qzapp/100280987/56ADC83E78CEC046F8DF2C5D0DD63CDE/100"
//                        ,id: "10000111"
//                        ,type: "friend"
//                        ,content: "临时："+ new Date().getTime()
//                    });
//
//                    /*layim.getMessage({
//                      username: "贤心"
//                      ,avatar: "http://tp1.sinaimg.cn/1571889140/180/40030060651/1"
//                      ,id: "100001"
//                      ,type: "friend"
//                      ,content: "嗨，你好！欢迎体验LayIM。演示标记："+ new Date().getTime()
//                    });*/
//
//                }, 3000);
            });

            //监听发送消息
            layim.on('sendMessage', function(data){
                var To = data.to;
                //console.log(data);

                if(To.type === 'friend'){
                    layim.setChatStatus('<span style="color:#FF5722;">对方正在输入。。。</span>');
                }

                //演示自动回复
                setTimeout(function(){
                    var obj = {};
                    if(To.type === 'group'){
                        obj = {
                            username: '模拟群员'+(Math.random()*100|0)
                            ,avatar: layui.cache.dir + 'images/face/'+ (Math.random()*72|0) + '.gif'
                            ,id: To.id
                            ,type: To.type
                            ,content: autoReplay[Math.random()*9|0]
                        }
                    } else {
                        obj = {
                            username: To.name
                            ,avatar: To.avatar
                            ,id: To.id
                            ,type: To.type
                            ,content: autoReplay[Math.random()*9|0]
                        }
                        layim.setChatStatus('<span style="color:#FF5722;">在线</span>');
                    }
                    layim.getMessage(obj);
                }, 1000);
            });

            //监听查看群员
            layim.on('members', function(data){
                //console.log(data);
            });

            //监听聊天窗口的切换
            layim.on('chatChange', function(res){
                var type = res.data.type;
                console.log(res.data.id)
                if(type === 'friend'){
                    //模拟标注好友状态
                    //layim.setChatStatus('<span style="color:#FF5722;">在线</span>');
                } else if(type === 'group'){
                    //模拟系统消息
                    layim.getMessage({
                        system: true
                        ,id: res.data.id
                        ,type: "group"
                        ,content: '模拟群员'+(Math.random()*100|0) + '加入群聊'
                    });
                }
            });
        });
	</script>
</body>
</html>